<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .main {
            width: 1200px;
            margin: auto;
        }

        .swiper-box {
            position: relative;
            height: 315px;
            width: 564px;
            margin: auto;
            overflow: hidden;
        }

        .swiper-list {
            height: 100%;
            display: flex;
            transition: all 1s;
        }

        .swiper-list>li {
            height: 100%;
            width: 564px;
            background-size: cover;
        }

        .swiper-box>span {
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            padding: 5px;
            color: #fff;
            background-color: rgba(123,123,123,0.5);
            cursor: pointer;
        }

        .swiper-box>span:nth-of-type(1) {
            left: 0px;
            border-radius: 0px 50% 50% 0px;
            padding-right: 10px;
        }

        .swiper-box>span:nth-of-type(2) {
            right: 0px;
            border-radius: 50% 0px 0px 50%;
            padding-left: 10px;
        }

        .swiper-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%,0px);
            background-color: rgba(255,255,255,0.5);
            display: flex;
            justify-content: space-between;
            border-radius: 10px;
            height: 12px;
            padding: 2px;
        }

        .swiper-nav>li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
        }

        .swiper-nav>.select-li {
            background-color: #f55;
        }

    </style>
</head>
<body>
    <main class="main">
        <div class="swiper-box">
            <ul class="swiper-list">
                
            </ul>
            <span onclick="doMove(-1)">&lt;</span>
            <span onclick="doMove(1)">></span>
            <ul class="swiper-nav">

            </ul>
        </div>
    </main>
</body>
<script>
    let arr = [
        "https://img.alicdn.com/imgextra/i1/6000000006292/O1CN010bS3AF1wLmoqygaI2_!!6000000006292-0-octopus.jpg",
        "https://img.alicdn.com/imgextra/i4/6000000002434/O1CN01XAAngX1TqonQ5DsLy_!!6000000002434-0-octopus.jpg",
        "https://img.alicdn.com/imgextra/i4/6000000007293/O1CN01JHAc9i23kFHGKMcaf_!!6000000007293-2-octopus.png",
        "https://img.alicdn.com/imgextra/i1/6000000001618/O1CN01zAHtv41Np5bXJgrHx_!!6000000001618-0-octopus.jpg",
        "https://img.alicdn.com/imgextra/i4/6000000001080/O1CN01yADQZS1JqgWS7Uke7_!!6000000001080-2-octopus.png",
    ];


    
    // 目前显示的索引
    let index = 0;

    let ul = document.querySelector(".swiper-list");
    let nav = document.querySelector(".swiper-nav");
    // 设置ul的宽度
    ul.style.width = `${arr.length * 564}px`;
    nav.style.width = `${arr.length * 15}px`;

    let lis = arr.map((v,i) => {
        // 创建图片
        let li = document.createElement("li");
        li.style.backgroundImage = `url(${v})`;
        ul.appendChild(li);

        // 创建导航小圆点
        let liNav = document.createElement("li");
        nav.append(liNav);
        if (i == 0) {
            liNav.classList.add("select-li");
        }
        
        return liNav;
    })

    function doMove(i) {
        index += i;
        if (index == arr.length) {
            index = 0;
        } else if (index == -1) {
            index = arr.length - 1;
        }
        ul.style.transform = `translate(${-(index * 564)}px,0px)`;

        lis.forEach((v,i) => {
            if (i == index) {
                v.classList.add("select-li");
            } else {
                v.classList.remove("select-li");
            }
        })
    }

    let intervalId = setInterval(() => doMove(1),3000);

    let swiperBox = document.querySelector(".swiper-box");
    swiperBox.addEventListener("mouseover",() => {
        clearTimeout(intervalId);
    });

    swiperBox.addEventListener("mouseleave",() => {
        intervalId = setInterval(() => doMove(1),3000);
    });
</script>
</html>